<template>
  <div class="pagination-container">
    <!-- 分页信息 -->
    <div v-if="showInfo" class="pagination-info">
      <span class="info-text">
        共 {{ total }} 条记录，第 {{ currentPage }} / {{ totalPages }} 页
      </span>
      <span v-if="showRange" class="range-text">
        显示第 {{ rangeStart }} - {{ rangeEnd }} 条
      </span>
    </div>

    <!-- 分页控件 -->
    <div class="pagination-controls">
      <!-- 每页条数选择 -->
      <div v-if="showSizeChanger" class="size-changer">
        <span class="size-label">每页</span>
        <el-select
          :model-value="pageSize"
          size="small"
          style="width: 80px"
          @change="handleSizeChange"
        >
          <el-option
            v-for="size in pageSizes"
            :key="size"
            :label="size"
            :value="size"
          />
        </el-select>
        <span class="size-label">条</span>
      </div>

      <!-- 分页器 -->
      <el-pagination
        :current-page="currentPage"
        :page-size="pageSize"
        :total="total"
        :page-sizes="pageSizes"
        :layout="layout"
        :background="background"
        :small="small"
        :disabled="disabled"
        :hide-on-single-page="hideOnSinglePage"
        :pager-count="pagerCount"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        @prev-click="handlePrevClick"
        @next-click="handleNextClick"
      />

      <!-- 快速跳转 -->
      <div v-if="showQuickJumper" class="quick-jumper">
        <span class="jumper-label">跳至</span>
        <el-input
          v-model="jumpPage"
          size="small"
          style="width: 60px"
          @keyup.enter="handleQuickJump"
          @blur="handleQuickJump"
        />
        <span class="jumper-label">页</span>
      </div>
    </div>

    <!-- 移动端简化版 -->
    <div v-if="isMobile" class="mobile-pagination">
      <el-button
        :disabled="currentPage <= 1"
        size="small"
        @click="handlePrevClick"
      >
        上一页
      </el-button>
      <span class="mobile-info">
        {{ currentPage }} / {{ totalPages }}
      </span>
      <el-button
        :disabled="currentPage >= totalPages"
        size="small"
        @click="handleNextClick"
      >
        下一页
      </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'

interface Props {
  currentPage: number
  pageSize: number
  total: number
  pageSizes?: number[]
  layout?: string
  background?: boolean
  small?: boolean
  disabled?: boolean
  hideOnSinglePage?: boolean
  pagerCount?: number
  showInfo?: boolean
  showRange?: boolean
  showSizeChanger?: boolean
  showQuickJumper?: boolean
  isMobile?: boolean
}

interface Emits {
  (e: 'update:currentPage', page: number): void
  (e: 'update:pageSize', size: number): void
  (e: 'size-change', size: number): void
  (e: 'current-change', page: number): void
  (e: 'prev-click', page: number): void
  (e: 'next-click', page: number): void
}

const props = withDefaults(defineProps<Props>(), {
  pageSizes: () => [10, 20, 50, 100],
  layout: 'total, sizes, prev, pager, next, jumper',
  background: true,
  small: false,
  disabled: false,
  hideOnSinglePage: false,
  pagerCount: 7,
  showInfo: true,
  showRange: true,
  showSizeChanger: true,
  showQuickJumper: true,
  isMobile: false
})

const emit = defineEmits<Emits>()

const jumpPage = ref('')

// 计算属性
const totalPages = computed(() => {
  return Math.ceil(props.total / props.pageSize)
})

const rangeStart = computed(() => {
  return (props.currentPage - 1) * props.pageSize + 1
})

const rangeEnd = computed(() => {
  return Math.min(props.currentPage * props.pageSize, props.total)
})

// 事件处理
const handleSizeChange = (size: number) => {
  emit('update:pageSize', size)
  emit('size-change', size)
  
  // 调整当前页码，确保不超出范围
  const newTotalPages = Math.ceil(props.total / size)
  if (props.currentPage > newTotalPages) {
    const newPage = Math.max(1, newTotalPages)
    emit('update:currentPage', newPage)
    emit('current-change', newPage)
  }
}

const handleCurrentChange = (page: number) => {
  emit('update:currentPage', page)
  emit('current-change', page)
}

const handlePrevClick = () => {
  const prevPage = Math.max(1, props.currentPage - 1)
  emit('update:currentPage', prevPage)
  emit('prev-click', prevPage)
}

const handleNextClick = () => {
  const nextPage = Math.min(totalPages.value, props.currentPage + 1)
  emit('update:currentPage', nextPage)
  emit('next-click', nextPage)
}

const handleQuickJump = () => {
  const page = parseInt(jumpPage.value)
  if (isNaN(page) || page < 1 || page > totalPages.value) {
    jumpPage.value = ''
    return
  }
  
  jumpPage.value = ''
  emit('update:currentPage', page)
  emit('current-change', page)
}

// 监听总数变化，调整当前页
watch(() => props.total, () => {
  if (props.currentPage > totalPages.value) {
    const newPage = Math.max(1, totalPages.value)
    emit('update:currentPage', newPage)
    emit('current-change', newPage)
  }
})
</script>

<style scoped>
.pagination-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

.pagination-info {
  display: flex;
  gap: 16px;
  font-size: 14px;
  color: var(--el-text-color-regular);
}

.info-text {
  font-weight: 500;
}

.range-text {
  color: var(--el-text-color-secondary);
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

.size-changer {
  display: flex;
  align-items: center;
  gap: 8px;
}

.size-label {
  font-size: 14px;
  color: var(--el-text-color-regular);
  white-space: nowrap;
}

.quick-jumper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.jumper-label {
  font-size: 14px;
  color: var(--el-text-color-regular);
  white-space: nowrap;
}

.mobile-pagination {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
}

.mobile-info {
  font-size: 14px;
  color: var(--el-text-color-regular);
  min-width: 60px;
  text-align: center;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .pagination-container {
    gap: 8px;
  }
  
  .pagination-info {
    flex-direction: column;
    gap: 4px;
    text-align: center;
  }
  
  .pagination-controls {
    gap: 8px;
  }
  
  .size-changer,
  .quick-jumper {
    display: none;
  }
}

@media (max-width: 480px) {
  .pagination-info {
    font-size: 12px;
  }
  
  .range-text {
    display: none;
  }
}
</style>